{% extends 'public/body.html' %}

{% block js %}
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
    <script src="{% static 'js/common.js' %}"></script>
    <script src="{% static 'js/swiper.js' %}"></script>
{% endblock %}


{% block title %}
    首页
{% endblock %}

{% block main %}

    <!-- 轮播图 -->
    <div class="swiper">

        {% for img in images %}
            <img src="{{ img.image.url }}" alt="轮播图">
        {% endfor %}
        <div class="dot">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
        <a class="left"></a>
        <a class="right"></a>
    </div>
    <!-- 网站主体 -->
    <div id="main" class="clearfix">
        <!-- 定义右侧窗口信息 -->
        <section class="aside">
            <aside class="ad">
                <a href="{{ ad.link }}" target="_blank">
                    <img src="{{ ad.image.url }}" alt="广告位">
                </a>
            </aside>

            <aside class="author_top">

                <span class="title">作者推荐</span>
                <hr>

                <div>
                    <img class="avator" src="./images/user.jpg"/>
                    <span class="name">大熊猫侯佩地方规划规范化和规范化</span>
                    <a class="at">关注</a>
                </div>
                <div>
                    <img class="avator" src="./images/user.jpg"/>
                    <span class="name">大熊猫侯佩</span>
                    <a class="at">关注</a>
                </div>


            </aside>
        </section>

        <section>
            <div class="title first">
                <a>热门资源</a>
                <a class="more-m" href="./catalog.html">更多</a>
            </div>
            <dl class="items">
                <dd>
                    <a href="./detail.html">
                        <div class="size">文件大小:<em>10.2M</em></div>
                        <div class="filename">vc++6.0 绿色版 完整版（支持win7，win8系统）</div>
                        <div class="score">积分:<em>2</em><br/>浏览:<em>330</em></div>
                        <img class="thumbimg" src="./images/rar.svg"/>
                    </a>
                </dd>
                <dt>
                    <a href="./detail.html">vc++6.0 绿色版 完整版（支持win7，win8系统）</a>
                </dt>


            </dl>


            <div class="title">
                <a>精选资源</a>
                <a class="more-m" href="./catalog.html">更多</a>
            </div>

            {% for res in best_res %}
                <dl class="items">
                    <dd>
                        <a href="{% url 'res:detail' res.pk %}">
                            <div class="size">文件大小:<em>{{ res.size }}K</em></div>
                            <div class="filename">{{ res.name }}</div>
                            <div class="score">积分:<em>{{ res.score }}</em><br/>浏览:<em>330</em></div>
                            <img class="thumbimg" src="{% static 'images/' %}{{ res.ext }}.svg" alt="{{ res.ext }}"/>
                        </a>
                    </dd>
                    <dt>
                        <a href="{% url 'res:detail' res.pk %}">{{ res.name }}</a>
                    </dt>
                </dl>
            {% endfor %}


        </section>
    </div>
{% endblock %}


{% block vue %}
    <script>


    </script>

{% endblock %}
